<template>
    <article>
        <header>消息框</header>
        <section>
            <header>颜色</header>
            <div>
                <cv-button c="btn primary mini distant" @click="alert">信息消息框</cv-button>
                <cv-button c="btn primary mini distant" @click="alertSuccess">成功消息框</cv-button>
                <cv-button c="btn primary mini distant" @click="alertWarn">警告消息框</cv-button>
                <cv-button c="btn primary mini distant" @click="alertError">错误消息框</cv-button>
                <cv-button c="btn primary mini distant" @click="alertSlot">自定义消息框</cv-button>
            </div>
        </section>
        <section>
            <header>模式</header>
            <div>
                <cv-button c="btn primary mini distant" @click="confirm">确认框</cv-button>
            </div>
        </section>
    </article>
</template>

<script>
    export default {
        name: "ExampleMessageBox",
        methods: {
            async alert() {
                await this.$alert("我是消息").result;
                console.info("close");
            },
            alertSuccess() {
                let component = this.$alertSuccess("我是消息").component;
                console.info(component);
            },
            alertWarn() {
                this.$alertWarn("我是消息");
            },
            alertError() {
                this.$alertError("我是消息");
            },
            alertSlot() {
                this.$alert("自定义消息", "自定义");
            },
            async confirm() {
                let result = await this.$confirm("我是消息").result;
                console.info(result);
            }
        }
    }
</script>

<style scoped>
</style>
